import { Button } from '@/components/bs-ui/button'
import { DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/bs-ui/dialog'
import { Input, Textarea } from '@/components/bs-ui/input'
import { useToast } from '@/components/bs-ui/toast/use-toast'
import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'

export default function EditAssistantDialog({ name, desc, onSave }) {
  const { t } = useTranslation()
  // State for form fields
  const [formData, setFormData] = useState({ name: '', desc: '' })

  useEffect(() => {
    setFormData({ name, desc })
  }, [name, desc])
  // console.log(formData, name, desc);

  // State for errors
  const [errors, setErrors] = useState<any>({})

  // Validate form fields
  const validateField = (name, value) => {
    switch (name) {
      case 'name':
        if (!value) return t('build.nameRequired')
        if (value.length > 50) return t('build.nameMaxLength')
        return ''
      case 'desc':
        if (value.length > 1000) return t('build.descMaxLength')
        return ''
      default:
        return ''
    }
  }

  // Handle field change
  const handleChange = e => {
    const { name, value } = e.target
    const error = validateField(name, value)

    setFormData(prev => ({ ...prev, [name]: value }))
    setErrors(prev => ({ ...prev, [name]: error }))
  }

  // Validate entire form
  const validateForm = () => {
    const formErrors = {}
    let isValid = true

    Object.keys(formData).forEach(key => {
      const error = validateField(key, formData[key])
      if (error) {
        formErrors[key] = error
        isValid = false
      }
    })

    setErrors(formErrors)
    return isValid
  }

  const { message, toast } = useToast()
  // Handle form submission
  const handleSubmit = e => {
    e.preventDefault()
    const isValid = validateForm()
    // console.log('Form data:', errors);
    if (!isValid) {
      return toast({
        title: t('prompt'),
        variant: 'error',
        description: Object.keys(errors).map(key => errors[key])
      })
    }

    onSave(formData)
  }

  return (
    <DialogContent className="sm:max-w-[625px]">
      <DialogHeader>
        <DialogTitle>{t('build.editAssistant')}</DialogTitle>
      </DialogHeader>
      <div className="flex flex-col gap-8 py-6">
        <div className="">
          <label htmlFor="name" className="bisheng-label">
            {t('build.assistantName')}
            <span className="bisheng-tip">*</span>
          </label>
          <Input
            id="name"
            name="name"
            placeholder={t('build.enterName')}
            className="mt-2"
            value={formData.name}
            onChange={handleChange}
          />
          {errors.name && <p className="bisheng-tip mt-1">{errors.name}</p>}
        </div>
        <div className="">
          <label htmlFor="desc" className="bisheng-label">
            {t('build.assistantDesc')}
          </label>
          <Textarea
            id="desc"
            name="desc"
            placeholder={t('build.enterDesc')}
            maxLength={1200}
            className="mt-2"
            value={formData.desc}
            onChange={handleChange}
          />
          {errors.desc && <p className="bisheng-tip mt-1">{errors.desc}</p>}
        </div>
      </div>
      <DialogFooter>
        <DialogClose>
          <Button variant="outline" className="px-11" type="button">
            {t('build.cancel')}
          </Button>
        </DialogClose>
        <Button type="submit" className="px-11" onClick={handleSubmit}>
          {t('build.confirm')}
        </Button>
      </DialogFooter>
    </DialogContent>
  )
}
